import { SetupContext, defineComponent, inject, onMounted, ref } from 'vue';
import { DynamicFormGroupPropsType, dynamicFormGroupProps } from '../component/dynamic-form-group/dynamic-form-group.props';
import { DesignerItemContext } from '../../../designer-canvas/src/types';
import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
import FDynamicFormGroup from '../component/dynamic-form-group/dynamic-form-group.component';

export default defineComponent({
    name: 'FFormGroupDesign',
    props: dynamicFormGroupProps,
    emits: [],
    setup(props: DynamicFormGroupPropsType, context: SetupContext) {
        const elementRef = ref();
        const designItemContext = inject<DesignerItemContext>('design-item-context') as DesignerItemContext;
        const componentInstance = useDesignerComponent(elementRef, designItemContext);
        componentInstance.value.canNested = false;
        componentInstance.value.canMove = true;
        componentInstance.value.canDelete = true;

        onMounted(() => {
            elementRef.value.componentInstance = componentInstance;
        });

        context.expose(componentInstance.value);

        return () => {
            return <FDynamicFormGroup {...props} ref={elementRef}></FDynamicFormGroup>;
        };
    }
});
